<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>福利-David个人博客站点</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="Shortcut Icon" href="../img/ic.png" />
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/section.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
        #header,
        #section,
        #footer {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <!-- 背景 -->
    <canvas id="canvas"> 啥年代了，还用ie？？？抱歉 不做兼容 </canvas>

    <!-- 头部 -->
    <header class="header" id="header">

        <!-- 顶部logo、标题 -->
        <div class="container" id="container">
            <span class="titleLarge">David</span>
            <span class="titleLittle">赵升阳的个人技术博客</span>
        </div>

        <!-- 头部导航栏 -->
        <div class="nav-header" id="nav-header">
            <ul id="ul">
                <li class="options"><a href="javascript:window.location.href= '../index.html'">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
                <li class="options menu">
                    <a href="#">生活笔记</a>
                    <ul class="secondMenu">
                        <li class="secondOptions"><a href="#">个人随笔</a></li>
                        <li class="secondOptions"><a href="#">个人日记</a></li>
                        <li class="secondOptions"><a href="#">个人展示</a></li>
                    </ul>
                </li>
                <li class="options menu">
                    <a href="#">技术杂谈</a>
                    <ul class="secondMenu">
                        <li class="secondOptions"><a>C/C++</a></li>
                        <li class="secondOptions"><a>Java</a></li>
                        <li class="secondOptions"><a>JavaScript</a></li>
                        <li class="secondOptions"><a>python</a></li>
                        <li class="secondOptions"><a>HTML</a></li>
                        <li class="secondOptions"><a>Other</a></li>
                    </ul>
                </li>
                <li class="options"><a href="./welfarePage.html">福利专区</a></li>
                <li class="options"><a href="./introduction.html">关于博主</a></li>
                <li class="options"><a href="./comments.html">给我留言</a></li>
                <li class="options"><a href="./sponsor.html">赞助作者</a></li>
                <li class="options"><a href="./exchange.html">技术交流</a></li>
                <li class="options"><a href="./project.html">项目合作</a></li>
                <li class="search" id="search">search</li>
            </ul>
        </div>
    </header>

    <!-- 主体 -->
    <section id="section" class="section">
        <div id="contain-wrapper">
            <div id="info">
                
                <div id="mainInfo">

                    <!-- 文章列表 -->
                    <article class="pages" v-for="page in selectedPage">
                        <header class="pageTitle">
                            <span class="pageTag">{{ page.tag }}</span>
                            <span @click="gotoArticlePage(page)" class="titleText">{{ page.title }}</span>
                        </header>
                        <div class="img">
                            <img :src="page.imgUrl" alt="" width="200px" height="123px">
                        </div>
                        <div class="note">{{ page.abstract }}</div>
                        <p class="authP">
                            <span>作者：{{ page.writer }}</span>
                            <span>{{ page.time }}</span>
                            <span>浏览：{{ page.read }}</span>
                            <span>{{ page.comments }}条评论</span>
                            <span>{{ page.likes }}喜欢</span>
                        </p>
                    </article>
                    <article  v-show="!selectedPage.length">
                        <header class="pageTitle">
                            <span style="color: white;width: 200px;height: 30px;" class="titleText">没有相关的文章!</span>
                        </header>
                    </article>
                </div>
            </div>

            <!-- 右侧边栏 -->
            <aside id="aside">
                <!-- 社交链接 -->
                <div id="social">
                    <div class="socialClub"><a href="#"><img src="../img/sina.png" alt="sina"></a></div>
                    <div class="socialClub"><a href="#"><img src="../img/wechat.png" alt="wechat"></a></div>
                    <div class="socialClub"><a href="#"><img src="../img/email.png" alt="email"></a></div>
                    <div class="socialClub"><a href="#"><img src="../img/sub.png" alt="sub"></a></div>
                </div>
                <div class="advContain">
                    <div class="advTitle">
                        热门专题
                    </div>
                    <div class="adv">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"
                                style="background-image:url('https://qiniu.cuiqingcai.com/wp-content/uploads/2015/02/wallpaper_5226849-1.jpg')">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url('https://qiniu.cuiqingcai.com/wp-content/uploads/2018/02/6.3-320x300.jpg')">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url('https://qiniu.cuiqingcai.com/wp-content/uploads/2015/04/wallpaper_5263464.jpg')">
                            </div>
                            <div class="swiper-slide"
                                style="background-image:url('https://qiniu.cuiqingcai.com/wp-content/uploads/2016/03/20-234x220.jpg')">
                            </div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-white"></div>
                        <div class="swiper-button-prev swiper-button-white"></div>
                    </div>
                </div>
                <div id="advList">
                    <!-- 广告区域、不在vue挂载范围内，dom操作添加广告 -->
                </div>
                <div id="pageHistory">
                    <!-- 文章归档，显示部分文章的简略信息，同样不在vue挂载范围内，由dom操作哦添加 -->
                    <h3>猜你喜欢</h3>
                </div>
            </aside>
        </div>
    </section>
    <!-- 底部 -->
    <footer>
        <div class="container">
            <div class="info">
                stay hungry stay foolish
            </div>
        </div>
    </footer>
    <!-- 飞升按钮 -->
    <img id="socket" src="../img/socket.png">
    <script src="../js/word.js"></script>
    <script src="../js/swiper.js"></script>
    <script src="../js/header.js"></script>
    <script src="../js/socket.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper2 = new Swiper('.adv', {
            speed: 1500,
            effect: 'fade',
            fadeEffect: {
                crossFade: true,
            },
            autoplay: 4000,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        });
        // 挂载vue
        var app = new Vue({
            el: '#mainInfo',
            data: {
               
                // 文章列表
                pageList: [],
                // 页面中显示的文章默认时全部
                selectedPage: [],
                // 侧边栏广告链接
                asideUrl: [
                    { imgUrl: 'https://qiniu.cuiqingcai.com/wp-content/uploads/2019/04/601554968669_.pic_hd.jpg', target: 'https://www.abuyun.com/http-proxy/introduce.html' },
                    { imgUrl: 'https://qiniu.cuiqingcai.com/wp-content/uploads/2019/06/4681561704146_.pic_hd.jpg', target: 'http://www.baidu.com' },
                    { imgUrl: 'https://qiniu.cuiqingcai.com/wp-content/uploads/2020/07/WechatIMG83-1.png', target: 'http://www.baidu.com' },
                    { imgUrl: 'https://qiniu.cuiqingcai.com/wp-content/uploads/2020/07/360x110%EF%BC%88%E4%B8%8A%E6%9E%B6%EF%BC%89.png', target: 'https://www.bilibili.com/' },
                    { imgUrl: 'https://qiniu.cuiqingcai.com/wp-content/uploads/2019/04/601554968669_.pic_hd.jpg', target: 'http://www.baidu.com' },
                    
                ]
            },
            mounted: function () {

                this.pageList = JSON.parse(sessionStorage.pages)
                this.selectedPage = this.pageList.filter(function(el){
                    return el.tag == 'welfare'
                })
                this.addAdv()
                this.initTotal()
                this.selectedTag()
            },
            updated:function(){
                this.articleHover()
            },
            methods: {
                articleHover: function () {
                    var pages = document.querySelectorAll('.pages')
                    pages.forEach(function (el) {
                        el.addEventListener('mouseenter', function () {
                            let img = el.querySelector('img')
                            img.style.transform = 'scale(1.3)'
                        })
                        el.addEventListener('mouseleave', function () {
                            let img = el.querySelector('img')
                            img.style.transform = 'scale(1.0)'
                        })
                    })
                },
                addAdv: function () {
                    var adv = document.querySelector('#advList')
                    this.asideUrl.forEach(function (el) {
                        let img = document.createElement('img')
                        img.src = el.imgUrl
                        img.style.width = '360px'
                        img.style.height = '110px'
                        img.style.margin = '10px 0'
                        img.style.cursor = 'pointer'
                        img.addEventListener('click', function () {
                            window.open(el.target)
                        })
                        adv.appendChild(img)
                    })
                },
                initTotal: function () {
                    var div = document.querySelector('#pageHistory')
                    this.selectedPage.slice(0,3).forEach(function (ele) {
                        var str = `
                                <div class="history clear_fix">
                                    <img src="${ele.imgUrl}">
                                    <div class="hisInfo">
                                        <div class="hisNote">${ele.title}</div>
                                        <p>
                                            <span>${ele.time}</span>
                                            <span>${ele.comments}条评论</span>
                                        </p>   
                                    </div>
                                </div>
                                `
                        div.innerHTML += str
                    })
                },
                selectedTag: function () {
                    var that = this
                    var a = document.querySelectorAll('.secondOptions')
                    a.forEach(function(ele){
                        ele.addEventListener('click',function(){
                            that.selectedPage = that.pageList.filter(function (el) {
                                return el.tag == ele.innerText
                            })
                            this.parentNode.style.display = 'none'
                        })
                    })
                    that.articleHover()
                },
                gotoArticlePage:function(page){
                    sessionStorage.setItem('article', JSON.stringify(page))
                    window.open('./articlePage.html')
                }
            }
        })
    </script>
</body>

</html>